<template>
  <div>
    <van-nav-bar
      title="订单"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-tabs v-model="orderTypeValue">
      <van-tab :title="tab.label" v-for="(tab, k) in opts订单类型" :key="k" />
    </van-tabs>

    <div class="orderList">
      <div class="orderItem" v-for="(order, k) in orderList" :key="k">
        <div class="dis-flex flex-sbc title">
          <span>订单号：{{ order.uid }}</span>
          <span class="text-red">{{ order | orderSt2String() }}</span>
        </div>
        <div class="content">
          <div class="time">
            预定于{{ order.time | momentFormat('YYYY-MM-DD HH:mm') }}
          </div>
          <div class="body dis-flex flex-sbc">
            <div class="goodsImg img-box">
              <img class="img-cover" :src="order.url" />
            </div>
            <div class="goodsName">{{ order.goodsName }}</div>
            <div class="goodsPrice">{{ order.price }}</div>
          </div>
          <div class="footer dis-flex flex-sbc">
            <span>取货方式：{{ order.取货方式 | value2label(取货方式) }}</span>
            <span>归还方式：{{ order.归还方式 | value2label(归还方式) }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tip fz20">
      未支付状态可能因价格/库存变动导致订单被取消，请尽快支付
    </div>

    <bottonNav></bottonNav>
  </div>
</template>
<script>
import { bus } from '@/main.js';
import { mapState, mapMutations } from 'vuex';
export default {
  name: 'order',
  components: {
    bottonNav: () => {
      return import('@/components/bottomNav.vue');
    },
  },
  data() {
    return {
      isDev: process.env.NODE_ENV == 'development',
      title: '订单',
      orderTypeValue: 0,
      orderList: [
        {
          uid: '20241010XXXX12345678',
          url:
            'https://s1.52poke.com/wiki/thumb/a/ae/003Venusaur.png/300px-003Venusaur.png',
          time: '2024-10-24',
          goodsName: '商品名',
          price: 1000,
          is付款: false,
          is发货: false,
          is收货: false,
          取货方式: 0,
          归还方式: 0,
        },
        {
          uid: '20241010XXXX12345679',
          url:
            'https://s1.52poke.com/wiki/thumb/a/ae/003Venusaur.png/300px-003Venusaur.png',
          time: '2024-10-24',
          goodsName: '商品名',
          price: 1000,
          is付款: false,
          is发货: false,
          is收货: false,
          取货方式: 0,
          归还方式: 0,
        },
      ],
    };
  },
  computed: {
    ...mapState(['订单类型', '取货方式', '归还方式']),
    opts订单类型: function() {
      return this.订单类型.map((v, i) => {
        return Object.assign(v, { idx: i });
      });
    },
  },
  filters: {
    orderSt2String: function(order) {
      if (!order.is付款) return '待付款';
      if (!order.is发货) return '待发货';
      if (!order.is收货) return '待收货';
      return '已完结';
    },
  },
  watch: {},
  methods: {
    onClickLeft: function() {},
    onClickRight: function() {},
    selectType: function(tab) {
      this.orderTypeValue = tab.idx;
      this.ajaxData(tab.value);
    },
    formatData: function(item) {
      let obj = {
        uid: item.uid,
        url: item.url,
        time: item.time,
        goodsName: item.goodsName,
        price: item.price,
        取货方式: item.取货方式,
        归还方式: item.归还方式,
      };
      return obj;
    },
    ajaxData: function(args) {
      let p = Object.assign({}, args);
      this.$api
        .get订单listByType(p)
        .then((res) => {
          if (res.code == 200 && res.data) {
            let tar = this.orderList;
            tar.splice(0, tar.length);
            res.data.forEach((item) => {
              tar.push(this.formatData(item));
            });
          }
        })
        .catch((err) => {
          console.error(err);
        })
        .finally((_) => {});
    },
  },
  beforeCreate: function() {},
  created: function() {},
  beforeMount: function() {},
  mounted: function() {
    this.ajaxData();
  },
  beforeUpdate: function() {},
  updated: function() {},
  beforeDestroy: function() {},
  destroyed: function() {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url('./../assets/config.less');
@import url('./../assets/index.less');

.orderList {
  margin: 1vw;
  .orderItem {
    margin-bottom: 4vw;
    border: 1px solid #999;
    .title {
      border-bottom: 1px solid #999;
    }
    .content {
    }
    .time {
      margin-left: 1em;
    }
    .body {
      position: relative;
    }
    .footer {
    }
    .goodsImg {
      width: 24vw;
      height: 24vw;
    }
    .goodsName {
    }
    .goodsPrice {
    }
  }
}
.tip {
  margin: 4vw;
  padding: 2vw;
  border: 1px solid #999;
  background-color: aquamarine;
  color: red;
}
</style>
